<template>
    <div id="navMenu">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                    :default-active="menu.defaultActive"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :unique-opened="true"
                    router
                >
                    <sidebar-item v-for="menu in menuList" :key="menu.id" :item="menu"/>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SidebarItem from './SidebarItem'
import { isURL } from '@/utils/validate'

export default {
    name: "navMenu",
    props:['menuList'],
    data(){
        return {
            menu:{
                defaultActive:"3"
            }
        }
    },
    components:{
        SidebarItem
    },
    computed:{
        sidebarLayoutSkin: {
            get () { return this.$store.state.common.sidebarLayoutSkin }
        },
        sidebarFold: {
            get () { return this.$store.state.common.sidebarFold }
        },
        menuActiveName: {
            get () { return this.$store.state.common.menuActiveName },
            set (val) { this.$store.commit('common/updateMenuActiveName', val) }
        },
        mainTabs: {
            get () { return this.$store.state.common.mainTabs },
            set (val) { this.$store.commit('common/updateMainTabs', val) }
        },
        mainTabsActiveName: {
            get () { return this.$store.state.common.mainTabsActiveName },
            set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
        }
    },
    watch:{
        $route : 'routeHandle'
    },
    created(){
        // console.log("组件传值测试，父传子--navMenu页面接收到的menuList：");
        // console.log(this.menuList)
        this.routeHandle(this.$route)
    },
    mounted() {
        // 以下均为测试代码
        // 测试cookie怎么用
        this.$cookies.set("test","test","5s")
        // console.log("cookie测试："+this.$cookies.get("test"))
        // console.log("authorize: "+this.$cookies.get("authorize"))
        // console.log("vuex测试，this.$store.state.count的值为："+this.$store.state.count)
        this.$store.commit("increment");
        // console.log("this.$store.state.count的值为："+this.$store.state.count)
        // 测试代码结束
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 路由操作
        routeHandle (route) {
            if (route.meta.isTab) {
                // tab选中, 不存在先添加
                var tab = this.mainTabs.filter(item => item.name === route.name)[0]
                if (!tab) {
                    if (route.meta.isDynamic) {
                        route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
                        if (!route) {
                            return console.error('未能找到可用标签页!')
                        }
                    }
                    tab = {
                        menuId: route.meta.menuId || route.name,
                        name: route.name,
                        title: route.meta.title,
                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
                        iframeUrl: route.meta.iframeUrl || '',
                        params: route.params,
                        query: route.query
                    }
                    this.mainTabs = this.mainTabs.concat(tab)
                }
                this.menu.defaultActive = tab.menuId + ''
                this.mainTabsActiveName = tab.name
            }
        }
    }
};
</script>

<style scoped lang="scss">
#navMenu {
    text-align: left;
}

.el-menu {
    border-right: none;
}
</style>